<template>
  <v-container fluid grid-list-md class="agent-query-container">
    <v-layout row wrap>
      <v-flex md2 sm1>
        <v-text-field mask="######" name="lftid" label="代理ID" v-model="queryForm.lftid" counter="6" type="number" maxLength="6"></v-text-field>
      </v-flex>
      <v-flex md2 sm1>
        <v-text-field name="nickname" label="昵称" v-model="queryForm.nickname"></v-text-field>
      </v-flex>
      <v-flex md2 sm1>
        <v-text-field mask="######" name="superId" label="上级ID" v-model="queryForm.superId" counter="6" type="number"></v-text-field>
      </v-flex>
      <!-- <v-flex md2 sm1 class="mt-2 date-wrapper">
        <v-menu offset-y>
          <v-btn depressed slot="activator">
            <v-icon>date_range</v-icon>
            <span>起始日期</span>
          </v-btn>
          <v-date-picker landscape :first-day-of-week="0" locale="zh-cn" v-model="queryForm.fromTime"></v-date-picker>
        </v-menu>
        <span class="date-text">{{queryForm.fromTime}}
          <span v-show="queryForm.fromTime !== ''" class="date-clear" @click="$set(queryForm, 'fromTime', '')">
            <v-icon color="red">cancel</v-icon>
          </span>
        </span>
      </v-flex>
      <v-flex md2 class="mt-2 date-wrapper">
        <v-menu offset-y>
          <v-btn depressed slot="activator">
            <v-icon>date_range</v-icon>
            <span>结束日期</span>
          </v-btn>
          <v-date-picker landscape :first-day-of-week="0" locale="zh-cn" v-model="queryForm.toTime"></v-date-picker>
        </v-menu>
        <span class="date-text">{{queryForm.toTime}}
          <span v-show="queryForm.toTime !== ''" class="date-clear" @click="$set(queryForm, 'toTime', '')">
            <v-icon color="red">cancel</v-icon>
          </span>
        </span>
      </v-flex> -->
      <v-flex md2 sm1 v-has="[agent.searchAgentList]">
        <v-btn @click="search" dark color="blue" class="mt-2">
          <v-icon>search</v-icon>
          <span class="pl-2 subheading">搜索</span>
        </v-btn>
      </v-flex>
      <v-flex md12 class="chip-selector">
        <v-chip @click="chipClicked(item)" v-for="item of chipItems" :key="item.name" outline :color="chipSelected === item.value ? 'teal':'grey'"
          text-color="black">
          <v-avatar class="white--text subheading" :class="chipSelected === item.value ? 'teal':'grey'">
            <v-icon v-if="chipSelected === item.value">check</v-icon>
          </v-avatar>
          <span class="subheading">{{item.name}}</span>
        </v-chip>
      </v-flex>
      <v-flex d-flex md12>
        <v-layout row wrap>
          <v-flex row>
            <!-- 查询数据表格 -->
            <v-data-table hide-actions :loading="showProgress" :headers="headers" :items="tableData" class="elevation-1">
              <v-progress-linear slot="progress" color="teal" height="5" indeterminate></v-progress-linear>
              <template slot="items" slot-scope="props">
                <td class="text-xs-center">
                  <v-avatar :color="props.item.color" size="24" class="white--text">{{props.item.ranking}}</v-avatar>
                </td>
                <td class="text-xs-center subheading">{{ props.item.lftid }}</td>
                <td class="text-xs-center">
                  <v-avatar size="36">
                    <img :src="props.item.headUrl" alt="">
                  </v-avatar>
                </td>
                <td class="text-xs-center subheading">{{ props.item.nickname }}</td>
                <!-- <td class="text-xs-center subheading">{{ props.item.telphone }}</td> -->
                <td class="text-xs-center subheading">{{ props.item.proxyLevel | ProxyLevel }}</td>
                <td class="text-xs-center subheading">{{ props.item.superId }}</td>
                <td class="text-xs-center subheading">{{ props.item.totalPrice }}</td>
                <td class="text-xs-center">
                  <v-btn flat round dark color="green darken-1" class="mx-1" @click="agentDetail(props.item)">
                    <span class="mx-1">代理资料</span>
                    <v-icon color="green darken-1">perm_contact_calendar</v-icon>
                  </v-btn>
                </td>
              </template>
              <!-- 没有数据时显示的提示 -->
              <template slot="no-data">
                <div class="text-md-center">
                  <v-icon color="yellow darken-3">warning</v-icon>
                  <span class="subheading">暂无数据</span>
                </div>
              </template>

            </v-data-table>
            <!-- 表格分页 -->
            <div class="text-xs-center my-2">
              <v-pagination @input="pageChange" circle :length="pagination.pageCount" :total-visible="pagination.totalVisible" v-model="pagination.page"></v-pagination>
            </div>
          </v-flex>
        </v-layout>
      </v-flex>
    </v-layout>
    <v-dialog v-model="dialog" max-width="700px">
      <v-card class="px-3 py-3">
        <v-card-title>
          <span class="headline">{{ formTitle }}</span>
        </v-card-title>
        <v-divider></v-divider>
        <v-card-text>
          <v-container grid-list-md>
            <v-layout wrap>
              <v-flex xs12 sm8 md6>
                <v-text-field prepend-icon="account_box" label="真实姓名" v-model="editedItem.realName"></v-text-field>
              </v-flex>
              <v-flex xs12 sm8 md6>
                <v-text-field :disabled="!allowEdit" prepend-icon="phone" label="手机号码" v-model="editedItem.telphone"></v-text-field>
              </v-flex>
              <v-flex xs12 sm8 md6>
                <v-text-field mask="######" :disabled="!allowEdit" prepend-icon="supervisor_account" label="上级ID" v-model="editedItem.superId"></v-text-field>
              </v-flex>
              <v-flex xs12 sm8 md6>
                <v-text-field :disabled="!allowEdit" prepend-icon="account_balance" label="开户行" v-model="editedItem.bankName"></v-text-field>
              </v-flex>
              <v-flex xs12 sm8 md6>
                <v-text-field :disabled="!allowEdit" prepend-icon="credit_card" label="银行卡号" v-model="editedItem.bankCard"></v-text-field>
              </v-flex>
              <v-flex xs12 sm8 md6>
                <v-text-field :disabled="!allowEdit" prepend-icon="picture_in_picture" label="身份证号码" v-model="editedItem.idNo"></v-text-field>
              </v-flex>
              <v-flex xs12 sm8 md6>
                <v-layout row align-center>
                  <v-flex md1 class="mr-2">
                    <svg t="1525858323871" class="icon" style="" viewBox="0 0 1037 1024" version="1.1" p-id="2795" width="24.3046875" height="24">
                      <path d="M665.600029 614.4c70.4-128 96-249.6 96-249.6l-12.8 0 0 0L640.000029 364.8 524.800029 364.8 524.800029 275.2l281.6 0L806.400029 236.8 524.800029 236.8 524.800029 102.4l-128 0 0 134.4-256 0 0 38.4 256 0 0 89.6L179.200029 364.8l0 38.4 441.6 0c0 6.4 0 6.4-6.4 12.8C614.400029 460.8 582.400029 524.8 556.800029 576 230.400029 448 134.400029 524.8 108.800029 537.6c-217.6 153.6-12.8 345.6 19.2 339.2 230.4 51.2 377.6-44.8 480-166.4 6.4 6.4 12.8 6.4 19.2 6.4 70.4 38.4 409.6 198.4 409.6 198.4s0-140.8 0-192C985.600029 723.2 800.000029 659.2 665.600029 614.4zM499.200029 672c-160 204.8-352 140.8-384 128C38.400029 780.8 12.800029 640 108.800029 595.2c160-51.2 300.8 6.4 403.2 57.6C505.600029 665.6 499.200029 672 499.200029 672z"
                        p-id="2796" fill="#515151"></path>
                    </svg>
                  </v-flex>
                  <v-flex md10>
                    <v-text-field :disabled="!allowEdit" label="支付宝帐号" v-model="editedItem.alipayAccount"></v-text-field>
                  </v-flex>
                </v-layout>
              </v-flex>
              <v-flex xs12 sm8 md6>
                <v-select :items="proxyLevelItems" label="代理等级" v-model="editedItem.proxyLevel"></v-select>
              </v-flex>
            </v-layout>
          </v-container>
        </v-card-text>
        <v-card-actions>
          <v-spacer></v-spacer>
          <v-btn color="red darken-1" flat @click.native="dialog = false">取消</v-btn>
          <v-btn color="blue darken-1" flat @click.native="confirmDialog">确定</v-btn>
        </v-card-actions>
      </v-card>
    </v-dialog>
  </v-container>
</template>

<script>
import * as agent from "../../api/agent";
import { mapMutations } from "vuex";
export default {
  data: () => ({
    agent: agent,
    showProgress: false,
    limit: 10,
    offset: 0,
    dialog: false,
    allowEdit: true,
    isSearch: false,
    pagination: {
      page: 1,
      pageCount: 1,
      totalVisible: 7
    },
    // 绑定到页面的
    queryForm: {
      lftid: "",
      nickname: "",
      superId: ""
    },
    // 实际发送查询条件
    form: {
      fromTime: "",
      toTime: "",
      lftid: "",
      nickname: "",
      superId: "",
      limit: 10,
      offset: 0,
      realName: ""
    },
    queryType: 1,
    queryTypeText: "",
    queryInput: "",
    tableData: [],
    formTitle: "代理资料",
    proxyLevelItems: [
      {
        text: "总代理",
        value: 1
      },
      {
        text: "一级代理",
        value: 2
      },
      {
        text: "二级代理",
        value: 3
      }
    ],
    headers: [
      { text: "排名", value: "ranking", align: "center", sortable: false },
      { text: "ID", value: "lftid", align: "center", sortable: false },
      { text: "头像", value: "headUrl", align: "center", sortable: false },
      { text: "昵称", value: "nickname", align: "center", sortable: false },
      { text: "等级", value: "proxyLevel", align: "center", sortable: false },
      { text: "上级ID", value: "superId", align: "center", sortable: false },
      { text: "业绩", value: "totalPrice", align: "center", sortable: false },
      { text: "操作", value: "actions", align: "center", sortable: false }
    ],
    editedIndex: -1,
    editedItem: {
      uid: "",
      name: "",
      headUrl: 0,
      lftid: 0,
      nickname: 0,
      telephone: 0,
      superId: 0,
      saleLevel: 1,
      proxyLevel: 1,
      createTime: "2018-4-19"
    },
    chipItems: [
      {
        name: "今日",
        value: 1
      },
      {
        name: "昨日",
        value: 2
      },
      {
        name: "本月",
        value: 3
      },
      {
        name: "上月",
        value: 4
      },
      {
        name: "季度",
        value: 5
      },
      {
        name: "总计",
        value: 0
      }
    ],
    chipSelected: 1
  }),
  mounted() {
    this.$nextTick(() => {
      $Vue.$off("refreshPage");
      $Vue.$on("refreshPage", () => {
        this.refresh();
      });
      $Vue.$off("areaCodeChange");
      $Vue.$on("areaCodeChange", () => {
        this.refresh();
      });
    });
    this.getAgentList();
  },
  methods: {
    refresh() {
      this.isSearch = false;
      this.offset = 0;
      this.chipSelected = 1;
      this.queryForm = {
        lftid: "",
        nickname: "",
        superId: ""
      };
      this.pagination.page = 1;
      this.getAgentList();
    },
    // 获取代理列表
    getAgentList() {
      const qs = {
        limit: this.limit,
        offset: this.offset,
        type: this.chipSelected
      };
      this.showProgress = true;
      agent.getAgentList.r(qs).then(({ data }) => {
        if (data.result === 0) {
          if (data.data) {
            let rankData = data.data.dataList;
            _.forEach(rankData, (item, index) => {
              item.ranking = index + 1 + this.offset;
              item.color = "teal lighten-1";
              item.ranking === 1 ? (item.color = "red") : void 0;
              item.ranking === 2 ? (item.color = "orange darken-2") : void 0;
              item.ranking === 3 ? (item.color = "amber") : void 0;
            });

            this.tableData = rankData;
            this.pagination.pageCount = data.data.totalCount
              ? Math.ceil(data.data.totalCount / this.limit)
              : 1;
          }
        } else {
          $Vue.$emit("toggleSnackbar", {
          text: data.message
        });
        }
        this.showProgress = false;
      });
    },
    // 按条件查询代理
    searchAgentList(form) {
      this.showProgress = true;
      agent.searchAgentList.r(form).then(({ data }) => {
        if (data.result === 0) {
          if (data.data) {
            let rankData = data.data.dataList;
            _.forEach(rankData, (item, index) => {
              item.ranking = index + 1 + this.offset;
              item.color = "teal lighten-1";
              item.ranking === 1 ? (item.color = "red") : void 0;
              item.ranking === 2 ? (item.color = "orange darken-2") : void 0;
              item.ranking === 3 ? (item.color = "amber") : void 0;
            });

            this.tableData = rankData;
            this.pagination.pageCount = data.data.totalCount
              ? Math.ceil(data.data.totalCount / this.limit)
              : 1;
          }
        } else {
          $Vue.$emit("toggleSnackbar", {
          text: data.message
        });
        }
        this.showProgress = false;
      });
    },
    editAgentDetail() {
      let opt = Object.assign({}, this.editedItem);
      agent.editAgentDetail.r(opt).then(({ data }) => {
        if (data.result == 0) {
          this.search();
        }
        this.dialog = false;
        $Vue.$emit("toggleSnackbar", {
          text: data.message
        });
      });
    },
    initialize() {
      this.tableData = [
        {
          headUrl: "https://countryflags.io/cn/flat/32.png",
          lftid: 103214,
          nickname: "搭街坊",
          superId: 123000,
          saleLevel: 1,
          sales: 888,
          proxyLevel: 1,
          createTime: "2018-4-19",
          totalSale: 3655,
          ranking: 1,
          color: "red"
        },
        {
          headUrl: "https://countryflags.io/kr/flat/32.png",
          lftid: 195211,
          nickname: "贾斯丁",
          telephone: "18861544141",
          superId: 100010,
          sales: 502,
          proxyLevel: 2,
          createTime: "2018-4-19",
          totalSale: 3633,
          ranking: 2,
          color: "orange darken-2"
        },
        {
          headUrl: "https://countryflags.io/jp/flat/32.png",
          lftid: 431021,
          nickname: "张三",
          telephone: "18861544141",
          superId: 100010,
          saleLevel: 1,
          sales: 502,
          proxyLevel: 2,
          createTime: "2018-4-19",
          totalSale: 2578,
          ranking: 3,
          color: "amber"
        },
        {
          headUrl: "https://countryflags.io/us/flat/32.png",
          lftid: 145201,
          nickname: "李四",
          telephone: "18861544141",
          superId: 100010,
          saleLevel: 1,
          sales: 502,
          proxyLevel: 2,
          createTime: "2018-4-19",
          totalSale: 1685,
          ranking: 4,
          color: "teal"
        },
        {
          headUrl: "https://countryflags.io/hk/flat/32.png",
          lftid: 145201,
          nickname: "李四",
          telephone: "18861544141",
          superId: 100010,
          saleLevel: 1,
          sales: 502,
          proxyLevel: 2,
          createTime: "2018-4-19",
          totalSale: 1685,
          ranking: 5,
          color: "teal"
        },
        {
          headUrl: "https://countryflags.io/tw/flat/32.png",
          lftid: 145201,
          nickname: "李四",
          telephone: "18861544141",
          superId: 100010,
          saleLevel: 1,
          sales: 502,
          proxyLevel: 2,
          createTime: "2018-4-19",
          totalSale: 1685,
          ranking: 6,
          color: "teal"
        }
      ];
    },
    agentDetail(item) {
      this.dialog = true;
      this.editedItem = Object.assign({}, item);
    },
    search(fromPage) {
      let valid = 0;
      let form = {};
      _.forEach(this.queryForm, (item, key) => {
        item ? (form[key] = item) : valid++;
      });
      if (valid == 3) {
        return $Vue.$emit("toggleSnackbar", {
          text: "请至少选择一个查询条件"
        });
      }

      // 点击分页
      if (fromPage !== "wyvj") {
        this.offset = 0;
        this.pagination.page = 1;
      }
      form.type = this.chipSelected;
      form.limit = this.limit;
      form.offset = this.offset;
      this.searchAgentList(form);
      this.isSearch = true;
    },
    pageChange(page) {
      this.offset = (page - 1) * this.limit;
      if (!this.isSearch) {
        this.getAgentList();
      } else {
        // ***
        this.search("wyvj");
      }
    },
    chipClicked(item) {
      this.chipSelected = item.value;
      this.getAgentList();
    },
    confirmDialog() {
      this.editAgentDetail();
    }
  }
};
</script>

<style lang="less" scoped>
.date-wrapper {
  position: relative;
  .date-text {
    display: inline-block;
    width: 100px;
    height: 40%;
    border-bottom: 1px solid #909090;
    position: absolute;
    top: 14px;
    right: 24px;
    .date-clear {
      position: absolute;
      right: -20px;
      top: 4px;
      &:hover {
        cursor: pointer;
      }
    }
  }
}
</style>

